<template>
  <mheader />
  <div class="container">
    <div class="vertical-menu">
      <el-menu mode="vertical" router :default-active="path">
        <el-menu-item index="account-info">
          <span>基本信息</span>
        </el-menu-item>
        <el-menu-item index="my-favourite">
          <span>我的收藏</span>
        </el-menu-item>
        <!-- <el-menu-item index="history">
          <span>历史记录</span>
        </el-menu-item>
        <el-menu-item index="balance">
          <span>余额详情</span>
        </el-menu-item>
        <el-menu-item index="works">
          <span>我的投稿</span>
        </el-menu-item> -->
        <el-menu-item @click="loginOut">
          <span>退出登入</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div style="margin: 0; padding: 0 50px">
      <router-view />
    </div>
  </div>
</template>
<script setup>
import mheader from "@/components/home-header.vue";
import { ref, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();
const path = ref(route.path.split("/")[2]);
const loginOut = () => {
  sessionStorage.clear();
  router.push("/");
};
</script>
<style scoped>
.container {
  margin-top: 75px;
  position: relative;
  display: flex;
  padding: 25px 270px 0;
}
</style>
